<!-- filename: frontend/src/components/CategoryDetails/LanguageList.vue -->
<template>
  <view class="list-container">
    <view v-if="isLoading" class="loading-state">加载中...</view>
    <view v-else-if="items.length === 0" class="empty-state">暂无语种数据</view>
    <view v-else class="list">
      <view v-for="item in items" :key="item" class="list-item" @click="onItemClick(item)">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
const emit = defineEmits(["item-click"]);
const items = ref([]);
const isLoading = ref(true);

onMounted(() => {
  uni.request({
    url: `${API_BASE_URL}/api/languages`,
    success: (res) => {
      items.value = res.data || [];
    },
    complete: () => {
      isLoading.value = false;
    },
  });
});

const onItemClick = (item) => {
  emit("item-click", item);
};
</script>

<style scoped>
/* 【核心修改】为容器添加弹性布局和高度 */
.list-container {
  width: 100%;
  height: 100%; /* 继承父容器的高度 */
  display: flex;
  flex-direction: column;
}
.list {
  flex-grow: 1; /* 让列表区域撑满所有可用空间 */
  overflow-y: auto; /* 当内容超出时，出现垂直滚动条 */
}
.list-item { 
  padding: 15px; 
  border-bottom: 1px solid #f0f0f0; 
  cursor: pointer; 
}
.list-item:hover { 
  background-color: #f9f9f9; 
}
/* 加载和空状态的样式 */
.loading-state, .empty-state {
    padding: 50px;
    text-align: center;
    color: #888;
}
</style>